<template>
  <div class="box">
    <div class="center-Box">
    <ArticleComponent class="fadeInLeft animated"></ArticleComponent>

      <div class="center-box fadeInUp animated">
        <el-card class="center-card">
         <div>
            <div class="zt-box">
              <img class="icon" src="../../assets/icon/代码块.png" alt="">
              <span style="font-size: 16px;margin-left: 15px;">
                选择主题
              </span>
            </div>
            <textarea class="fawc-ipt" type="text" v-model="text" placeholder="有什么想和大家分享的"/>
            </div>
          <div class="bq-box">
            <div class="left-bq">
              <div class="bq-1" >
                <img style="width: 24px;height: 24px;" class="hover-bq" src="../../assets/icon/表情.png" alt="">
              </div>
              <div class="img-1">
                <img style="width: 24px;" class="hover-bq" src="../../assets/icon/图片.png" alt="">
                
              </div>
              <div class="at-1" >
                <img style="width: 24px;" class="hover-bq" src="../../assets/icon/艾特.png" alt="">
              </div>
             </div>
            <div class="right-bq">
             
              <img style="width: 24px;" class="icon2" src="../../assets/icon/设置.png" alt="">
              
              <button @click="clkWz" class="btn">发布</button>
             
            </div>
          </div>
        </el-card>
        <el-card class="min-box">
          <el-menu :default-active="navBar.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
            <el-menu-item @click="pathChildren(index)" 
            :index="index.toString()" v-for="(item,index) in navBar.textList" 
            :key="item.id" >{{ item.name }}</el-menu-item>
          </el-menu>        
        </el-card>
          <el-card class="router-box">
            <router-view/>
          </el-card>

      </div>
     <div>
      <Sculpture class="fadeInRight animated"></Sculpture>
      <SideJump class="fadeInRight animated" style="margin-top: 50px;"></SideJump>
     </div>

    </div>
  </div>
</template>

<script>
import Sculpture from '@/components/sidebar/sculpture.vue'
import ArticleComponent from '@/components/sidebar/Article-component.vue'
import SideJump from '@/components/sidebar/Side-Jump.vue';
export default {
  name: 'JkdsDontai',
  components:{
    Sculpture,
    ArticleComponent,
    SideJump
  },
  data() {
    return {
      titleValue: this.$route.meta.title,
      text:'',
      activeIndex: "1",
      navBar:{
        activeIndex: "0",
        textList: [
        {

          name:'全部',
        },
        {

          name:'文章',
        },
        {

          name:'代码',
        },
        {

          name:'上传资源',
        },
        {

          name:'视频',
        },
      ]
      },
    };
  },
  watch:{
    "$route.meta.title":{
      handler(){
        this.titleValue = this.$route.meta.title
      }
    }
  },
  mounted() {
    
  },

  methods: {
    clkWz(){
      if(this.text==''){
        this.$message.error('不能发布空文章！');
      }else{
        this.$message({
          message: '发布成功啦，快去看看吧',
          type: 'success'
        });
        this.text=''
      }
    },
    pathChildren(index){
      switch(index){
        case 0:
          this.$router.push('/front/Dontai/whole')
          console.log('跳转全部');

          break;
          case 1:
          this.$router.push('/front/Dontai/minaAticle')
          console.log('跳转文章');

          break;
          case 2:
          this.$router.push('/front/Dontai/code')
          console.log('跳转代码');
          break;
          case 3:
          this.$router.push('/front/Dontai/naturalResources')
          console.log('跳转上传资源');
          
          break;
          case 4:
          this.$router.push('/front/Dontai/video-view')
          console.log('跳转视频');

          break;
      }
    },
    handleSelect(key, keyPath){
      console.log(key, keyPath);
    }
  },
};
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  height: 100%;
  .center-Box{
    width: 1500px;
    margin: 0 auto;
    display: flex;
    // background-color: blue;
    margin-top: 15px;
    .center-box{
      width: 900px;
      height: 1000px;
      // background-color: aqua;
      margin-left: 15px;
      margin-right: 15px;
      border-radius: 15px;
    }
  }
}
.center-card{
  display: flex;
  flex-direction: column;
  border-radius: 15px;

}
.fawc-ipt{
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 16px;
  border: none;
  resize:none;
}
.fawc-ipt:focus{
  outline:none;
}
.bq-box{
  display: flex;
  justify-content: space-between;
}
.left-bq{
  width: 50%;
  display: flex;
  div{
    margin: 20px 20px 20px 0;
  }
}
.icon{
  margin-left: 15px;
}
.zt-box{
  width: 140px;
  height: 35px;
  display: flex;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.123);
  border-radius: 20px;
  cursor :pointer;
}
.right-bq{
  // background-color: red;
  display: flex;
  align-items: center;
}
.btn{
  width: 80px;
  height: 40px;
  border-radius: 10px;
  border: none;
  color: white;
  background: #00AEEC;
  cursor :pointer;
}
.icon2{
  margin-left: 20px;
  margin-right: 20px;
  cursor :pointer;
}
.hover-bq{
  cursor :pointer;
}
.min-box{
  margin-top: 20px;
  border-radius: 15px;
}
.router-box{
  margin-top: 20px;
  border-radius: 15px;
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}



/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

</style>